<template>
  <div class="app-container dashboard-container">
    <!-- 第一行：数据卡片 -->
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card shadow="never">
          <div class="card-header">
            <span>总用户数</span>
            <el-tag type="success">总</el-tag>
          </div>
          <div class="card-body">
            <div class="value">{{ stats.totalUsers || 0 }}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
         <el-card shadow="never">
          <div class="card-header">
            <span>今日新增</span>
             <span class="compare">昨日 {{ stats.yesterdayNewUsers || 0 }}</span>
          </div>
          <div class="card-body">
            <div class="value">{{ stats.todayNewUsers || 0  }}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
         <el-card shadow="never">
          <div class="card-header">
            <span>日活跃用户 (DAU)</span>
          </div>
          <div class="card-body">
            <div class="value">{{ stats.dailyActiveUsers || 0 }}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
         <el-card shadow="never">
          <div class="card-header">
            <span>月活跃用户 (MAU)</span>
          </div>
          <div class="card-body">
            <div class="value">{{ stats.monthlyActiveUsers || 0 }}</div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 第二行：新增用户趋势图 -->
    <el-row style="margin-top: 20px;">
        <el-col :span="24">
            <el-card shadow="never">
                <div slot="header">
                    <span>最近7天新增用户趋势</span>
                </div>
                <div ref="trendChart" style="height: 300px;"></div>
            </el-card>
        </el-col>
    </el-row>
  </div>
</template>

<script>
import { getUserStats } from "@/api/iot/laUser";
import * as echarts from 'echarts';

export default {
  name: "UserDashboard",
  data() {
    return {
      stats: {},
      chart: null
    };
  },
  created() {
    this.fetchStats();
  },
  methods: {
    fetchStats() {
      getUserStats().then(response => {
        this.stats = response.data;
        // 数据加载后初始化图表
        this.$nextTick(() => {
          this.initTrendChart();
        });
      });
    },
    initTrendChart() {
      if (this.chart) {
        this.chart.dispose();
      }
      this.chart = echarts.init(this.$refs.trendChart);

      const trendData = this.stats.last7DaysNewUserTrend || [];
      const dates = trendData.map(item => item.date);
      const counts = trendData.map(item => item.count);

      const option = {
        tooltip: { trigger: 'axis' },
        xAxis: { type: 'category', data: dates },
        yAxis: { type: 'value' },
        series: [{
          data: counts,
          type: 'line',
          smooth: true,
          name: '新增用户数'
        }],
        grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }
      };
      this.chart.setOption(option);
    }
  }
};
</script>

<style lang="scss" scoped>
.dashboard-container {
    .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #909399;
        font-size: 14px;
    }
    .card-body {
        .value {
            font-size: 24px;
            font-weight: bold;
            margin-top: 10px;
        }
    }
    .compare {
        font-size: 12px;
        color: #c0c4cc;
    }
}
</style>
